<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../CSS/css/lib/element.css">
    <link rel="stylesheet" href="../../CSS/css/user/common.css">
    <!--引入组件库-->
    <script src="../../JS_lib/lib/vue.js"></script>
    <script src="../../JS_lib/lib/elementui.js"></script>
    <!--<script src="https://unpkg.com/vue"></scri
    pt>-->
</head>
<body>
<div id="app">
    <div class="container" >
        <el-button @click="visible=true">按钮</el-button>
        <el-dialog :visible.sync="visible" title="Hello world">
            <p>欢迎使用 Element</p>
            <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
        </el-dialog>
        <ol>
            <li v-for="todo in todos">
                {{todo.text}}
            </li>
        </ol>

        <el-checkbox v-model="checked">备选项</el-checkbox>
        <el-checkbox  v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="city in cities" :label="city.id" :key="city.id">{{city.name}}</el-checkbox>
        </el-checkbox-group>
        <el-upload
                class="upload-demo"
                drag
                action="https://jsonplaceholder.typicode.com/posts/"
                multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
    </div>
</div>
<script>
    var app=new Vue({
        el:'#app',
        data:function(){
            return{
                 todos:[
                    {text:'学习JavaScript'},
                    {text:'学习Vue'},
                    {text:'整个牛项目'}
                ],
                visible:false,
                dialogVisible:false,
                checked:false,
                cities:[
                    {name:'上海', id:'0'},
                    {name:'北京', id:'1'},
                    {name:'广州', id:'2'},
                    {name: '深圳',id:'3'}
                ],
                checkAll:false,
                checkedCities:[],

            }
        },
        methods:{
            handleCheckAllChange:function(){

            },
            handleCheckedCitiesChange:function(){

            }
        },
        created:function(){

        }
    })
</script>
</body>
</html>